import * as echarts from '../../components/ec-canvas/echarts';

let chart = null;

function initChart(canvas, width, height, dpr) {
    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);

    var colorListArr = ["#a7aba1", "#18a43d", "#0099db", "#FF9806", '#fff100', '#c9080b'];
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '8%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['1', '', '', '', '5', '', '', '', '', '10', '', '', '', '', '15'],
            splitLine: {
                show: false
            },
            axisLabel: {  
                interval: 0,  
                rotate: 0  // 如果X轴文字过长，坐标轴斜着显示
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true
            }
        },
        yAxis: {
            axisLine: {
                show: true,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#737373",
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgba(131,101,101,0.2)",
                    type: "dashed",
                },
            },
        },
        series: {
            z: 2,
            name: "动值",
            type: "bar",
            data: [12, 23, 44, 54, 80, 125, 166, 188, 252, 260, 110, 100, 60, 30, 10].map((item, i) => {
                let oColor = '';
                if(item <= 50){
                    oColor = colorListArr[0]
                }else if(50 < item && item <= 100){
                    oColor = colorListArr[1]
                }else if(100 < item && item <= 150){
                    oColor = colorListArr[2]
                }else if(150 < item && item <= 200){
                    oColor = colorListArr[3]
                }else if(200 < item && item <= 250){
                    oColor = colorListArr[4]
                }else if(250 < item){
                    oColor = colorListArr[5]
                }
                let itemStyle = {
                    color: oColor,
                };
                return {
                    value: item,
                    itemStyle: itemStyle,
                };
            }),
            label: {
                show: false,
            },
        },
    };

    chart.setOption(option);
    return chart;
}

Page({
    onShareAppMessage: function (res) {
        return {
            title: 'ECharts 可以在微信小程序中使用啦！',
            path: '',
            success: function () {},
            fail: function () {}
        }
    },
    data: {
        ec: {
            onInit: initChart
        }
    },
    onReady() {
        setTimeout(function () {
            // 获取 chart 实例的方式
            // console.log(chart)
        }, 2000);
    }
});